<!--setup让js代码可以被执行，不加setup，那js代码不执行了-->
<script setup>
/*import ... from ... 语句，从vue框架中导入ref()函数*/
import {onMounted, ref} from "vue";
/*import ... from ... 语句，从httpRequest.js中导入doPost()函数*/
import {doGet, doPost} from "../http/httpRequest.js";
import {clearToken, getTokenName, showMessage} from "../util/utils.js";
import {useRouter} from "vue-router";

//定义一个路由对象，使用 useRouter()函数创建一个router；
let router = useRouter();

//用户登录的验证规则是一个对象
let userRules = {
  //验证登录账号，一个字段的验证规则可能有多个，所以验证规则是一个数组
  loginAct : [
    //required表示loginAct必须要输入值，如果没有值，就用message的内容进行错误提示，trigger表示触发的时机，那就光标离开时触发
    { required: true, message: '请输入登录账号', trigger: 'blur' }
  ],
  //验证登录密码
  loginPwd : [
    { required: true, message: '请输入登录密码', trigger: 'blur' },
    //min表示密码至少输入3个字符，max表示密码最多输入5个字符，如果不满足要求，就用message的内容进行错误提示，trigger表示触发的时机，那就光标离开时触发
    { min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur' }
  ]
};

let age = ref(0); //定义数字

//定义一个用户对象，初始值是空
let user = ref({}) //RefImpl对象

//定义form表单中的ref="userFormRef"引用对象，名字要相同
const userFormRef = ref()
//登录函数
const login = (formEl) => {
  let formData = new FormData();
  formData.append('loginAct', user.value.loginAct);
  formData.append('loginPwd', user.value.loginPwd);
  formData.append('rememberMe', user.value.rememberMe);
  if (!formEl) { //如果formEl不存在，也就是你没有给login()函数传userFormRef参数，那么就return，不做验证了
    return
  }
  formEl.validate((valid) => {
    if (valid) {//当valide参数是true，表示验证通过，否则通过
      //ajax提交登录请求
      doPost('/api/login', formData).then( (response) => { //ajax的请求完成后，拿到了返回结果就会触发then()函数 （一般不省略）
        if (response.data.code === 200) { //response.data = R （code、msg、data）
          //登录成功了，页面上提示一下
          showMessage('登录成功', 'success');
          //登录成功，清理一下之前存储的token信息，避免两个范围中都存有token的混乱局面
          clearToken()
          //登录成功，在前端客户端存储用户token（jwt）
          if (user.value.rememberMe === true) { //用户选择了“记住我”
            window.setItem(getTokenName(), response.data.data);
          } else {
            window.sessionStorage.setItem(getTokenName(), response.data.data);
          }
          //页面路由跳转
          router.push('/dashboard');
        } else {
          //登录失败，页面上提示一下
          showMessage('登录失败，原因：' + response.data.msg, 'error');
        }
      }).catch( (error) => { //ajax的请求，发生了异常或错误，触发catch()函数 （可以省略）
        console.log(error);
        //登录异常/错误

      }).finally( () => { //请求之后，不管是成功了，还是异常错误了，最终都会执行finally()函数 （可以省略）
        // 总是会执行
      });
    }
  })
}

//vue九个生命周期阶段中的其中一个阶段，在页面渲染后触发执行
onMounted(() => {
  //判断是否需要给用户自动登录
  autoLogin();
})

//自动登录的函数
const autoLogin = () => {
  let token = window.localStorage.getItem(getTokenName());
  if (token) { //表示token存在，token有值，token不是空的
    //需要自动登录
    doGet('/api/autoLogin', {}).then(resp => {
      if (resp.data.code === 200) {
        //token验证是没有问题的，那就可以自动登录，也就是直接跳转到驾驶舱页面
        router.push('/dashboard')
      }
    })
  }
}
</script>

<template>
  <el-container>
    <!--左边-->
    <el-aside width="200px">
      <img src="../assets/loginBox.jpg" alt="背景图片无法显示">
      <p>
        欢迎使用动力云客系统
      </p>
    </el-aside>

    <!--右边-->
    <el-main>
      <p>欢迎登录</p>
      <!--model: 表单数据对象-->
      <!--rules: 表单验证规则-->
      <!--label-position: 表单域标签的位置，当设置为 left 或 right 时，则也需要设置label-width属性-->
      <!--label-width: 标签的长度，例如 '50px'。 作为Form直接子元素的form-item会继承该值。可以使用auto-->
      <!--style: 写css样式，这个属性在el-form标签的api中找不到，凡是找不到的属性都是原始的html属性-->
      <el-form
          ref="userFormRef"
          :model="user"
          :rules="userRules"
          :label-position="'right'"
          label-width="15%"
          style="max-width: 50%">

        <el-form-item label="账号" prop="loginAct">
          <el-input v-model="user.loginAct"/>
        </el-form-item>

        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password" v-model="user.loginPwd"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login(userFormRef)">登 录</el-button>
        </el-form-item>

        <el-form-item>
          <el-checkbox v-model="user.rememberMe" label="记住我" size="large"/>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<!--scoped只对当前vue页面里面的html代码有效，可以避免多个页面的样式冲突问题-->
<style scoped>
.el-aside {
  background: #242424;
  height: calc(100vh);
  width: 40%;
  text-align: center;
  padding-top: 50px;
  color: #f9f9f9;
  font-size: 28px;
}
.el-main {
  text-align: center;
  padding-top: 100px;
}
.el-form {
  margin: auto;
}
.el-button {
  width: 100%;
}
</style>